<template>
  <div class="main main_bg">
    <gltitle :titleSize="titleSize" :is_bg="false"></gltitle>
    <div class="head">
      <div class="db">
        <div class="photo"><img src="../../assets/images/kf_photo.png" alt=""></div>
        <div class="flex c-fff" @click="handerPath">
          {{$t('kefu.gm_online')}} <van-icon name="arrow" size="34"/>
        </div>
      </div>
    </div>
    <div class="customer">
      <div class="customer-title">{{$t('new.desc10')}}</div>
      <div class="customer-link">{{email}} <img src="../../assets/images/blcimg/copy1.png" alt="" v-clipboard:copy="email" v-clipboard:success="onCopy" /></div>
    </div>
    <div class="titles">
      <div class="container">
        {{$t('kefu.you_think_ask')}}
      </div>
    </div>

    <div class="list">
      <div class="container">
        <ul>
          <li class="db" @click="jump_link(item.id,item.title)" v-for="(item,k) in datainfo" :key="k">
            <div class="flex name text-overflow">{{item.title}}</div>
            <div class="str"><van-icon name="arrow" size="30"/></div>
          </li>
        </ul>
      </div>
    </div>

    <div class="container">
      <div class="more"><router-link :to="{path:'/member/help'}">{{$t('kefu.help_center')}}</router-link></div>
    </div>




  </div>
</template>
<script>
  export default {
    data(){
      return {
        titleSize:'',
        is_mt:true,
        datainfo:[],
        email:"",
        customerLink:''
      }
    },
    mounted() {
        this.$post(this.URL.common.h5page_list,{}).then( res =>{
          if(res.code==0){
           let info= res.data.find(item =>item.tag=='CUSTOMER_SERVICE_LINK');
           this.customerLink=info.url;
          }
        })
        this.$post(this.URL.common.custom,{}).then(res =>{
          if(res.code==0){
            this.email=res.data.email;
          }
        })
    },
    methods: {
      handerPath() {
        window.location.href=this.customerLink;
      },  
     onCopy() {
            this.$toast(this.$t('toast.copy_success'));
        },
      jump_link(id,title){
        this.$router.push({
          path: "/member/help_view",
          query: {
            id: id
          }
        });

        // this.$router.push({
        //   path: "/kefu/view",
        //   query: {
        //     id: id,
        //     title:title
        //   }
        // });
      }
    },


  }

</script>


<style lang="less" scoped>
  #app {
    .main {
      background-image: url(../../assets/images/bg_kf.png);
      background-position: center -.74rem;
      background-repeat: no-repeat;
      background-size: 100% auto;
      .head {
        padding: 0 0.32rem 0 1.2rem;
        position: relative;
        .photo {
          height: 2.8rem;
          margin-right: .8rem;
          opacity: 0;
        }
        .flex {
          font-size: .38rem;
          font-weight: 500;
          text-align: right;
          line-height: .42rem;
          i {
            vertical-align: middle;
          }
        }
      }
      .titles {
        font-weight: 400;
        color: #888888;
        line-height: .34rem;
        padding: .4rem 0 .2rem;
      }
      .list {
        background: #fff;
        ul {
          li {
            line-height: 1rem;
            font-size: .32rem;
            color: rgba(34,34,34,1);
            border-bottom: 0.02rem solid #f3f3f3;
          }
        }
      }
      .more {
        padding: .27rem 0;
        a {
          color:#2B388F;
          font-size: .3rem;
        }
      }
    }
    .customer{
      padding: .24rem .3rem;
      .customer-title{
        font-size: .26rem;
        color: #222222;
      }
      .customer-link{
        margin-top: .12rem;
        font-size: .3rem;
        font-weight: 600;
        display: flex;
        line-height: .34rem;
        img{
          width: .35rem;
          height: .34rem;
          margin-left: .12rem;
        }
      }
    }
  }
</style>
